<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}
.list_title{padding-bottom: 30px;}
</style>

<template>
  <div>

      <template v-if="routerPath=='cnyrechverify'" >
        <div v-loading="loading">
          <!--工具条-->
          <el-col :span="24" class="toolbar toolbar_header" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
              <el-form-item label="充值状态:">
                <el-select v-model="filters.status" placeholder="请选择">
                  <el-option label="全部" value=""></el-option>                  
                  <el-option label="未付款" value="40"></el-option>
                  <el-option label="到账成功" value="41"></el-option>
                  <el-option label="人工到账" value="42"></el-option>
                  <el-option label="处理中" value="43"></el-option>
               </el-select>
              </el-form-item>             
              <el-form-item label="开始时间">
                <el-date-picker type="date" placeholder="开始时间" @change="getSTimeB" format="yyyy-MM-dd" value-format="yyyy/MM/dd" v-model="filters.beginDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">              
                <el-date-picker type="date" placeholder="结束时间" @change="getSTimeD" format="yyyy-MM-dd" value-format="yyyy/MM/dd"  v-model="filters.endDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
              <el-form-item label="用户名:">
                <el-input v-model="filters.userName" placeholder="等值匹配"></el-input>
              </el-form-item>   
              <el-form-item label="序列号:">
                <el-input v-model="filters.tradeNo" placeholder=""></el-input>
              </el-form-item>           
              <el-form-item>
                <el-button type="primary" v-on:click="fetchData">搜索</el-button>
              </el-form-item>
            </el-form>
          </el-col>        
        <!-- table start  -->
        <el-table :data="list" style="width: 100%" max-height="1000">
          <el-table-column width="37">
            <template scope="scope">
              <img src="../assets/img/sysFile.gif">
            </template>
          </el-table-column> 
          <el-table-column label="ID"  prop="idNo"  width="140">
          </el-table-column>
          <el-table-column prop="userName" label="用户名" >
          </el-table-column>
              
          <el-table-column prop="realName" label="真实姓名" >
          </el-table-column>
         <!--  <el-table-column prop="currName" label="充值币种" width="42">
          </el-table-column> -->
          <el-table-column prop="amount" label="充值金额" >
          </el-table-column>       
          <el-table-column prop="fee" label="手续费" width="70">
          </el-table-column>
          <el-table-column prop="amountReal" label="到账金额" >
          </el-table-column>
          <el-table-column prop="type" label="充值方式" :formatter="formatType">
          </el-table-column>
          <!-- <el-table-column prop="idNo" label="充值订单"  >
          </el-table-column> -->
          <el-table-column prop="tradeNo" label="充值序列号" >
          </el-table-column>
          <el-table-column prop="createTime" label="充值时间">
          </el-table-column>
          <el-table-column prop="status" label="状态" :formatter="formatSex">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">       
              <span class="span_btn" v-if="scope.row.status==40"  @click="toggleStatus(scope.$index, scope.row)" >审核</span>
             
            </template>
          </el-table-column>
        </el-table>
          <!--工具条-->
        <el-col :span="24" class="toolbar toolbar_footer">
          <el-pagination v-if="total" background layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
          </el-pagination>
        </el-col>
        <!-- table end  -->
           <!-- 充值审核 -->
        <el-dialog title="充值审核" top="0"  class="form_part sellorder" :visible.sync="withVerifyVisible"  :close-on-click-modal="false">
            <el-form :model="withVerify" class="" label-width="100px" :rules="withVerifyRules" ref="withVerify">
                                     
                <el-form-item label="状态" prop="status">
                  <el-select v-model="withVerify.status" placeholder="请选择状态">
                    <!-- <el-option label="到账成功" value="41" ></el-option>                     -->
                    <el-option label="人工到账" value="42" ></el-option>                    
                    <!-- <el-option label="处理中" value="43" ></el-option>                     -->
                  </el-select>
                </el-form-item>    
                
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="withVerify.remark" placeholder="请输入备注说明" auto-complete="off"></el-input>
                </el-form-item>
                
                <el-form-item class="btn_add">
                   <el-button style="width:100%" type="primary"  @click.native="sureVerify('withVerify')" :loading="withVerifyLoading">确定</el-button>
                </el-form-item>
             
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
              <el-button style="width:100%" type="primary"  @click.native="addSubmit('addForm')" :loading="addLoading">添加</el-button>
             
            </div> -->
        </el-dialog>
      </div>

      
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>

  
  
</template>

<script>
import * as cnyrecharge from '../api/cnyrecharge';

let myMixin = {
  data: function() {
    return { cnyrecharge }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      withVerifyVisible:false,
      withVerifyLoading:false,
      withVerify:{},
      withVerifyRules:{
        status:[
            { required: true, message: '请选择状态', trigger: 'change' }        
        ],
        remark:[
            { required: true, message: '请输入备注说明', trigger: 'blur' }
        
        ],

      },
      filters:{beginDate:'',endDate:'',userName:'',tradeNo:'',},
      isDel:true,
      isEdit:true,
      isReleRole:true,
      isReleGroup:true,
      total: 10,
      page: 1,
      showCount:10,
      routerPath:'',
      addLoading:false,//
      editLoading:false,//
      list: [
        { userName:"test",
          userGender:1,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        },
        { userName:"test",
          userGender:2,
          loginName:"test",
          loginPass:"test",
          phoneNum:"test",
          userMail:"test",
          certNo:"test",
        }
      ],
      canReset: true,
      loading: false,
      groupId:'',//组id
      userId:'',//用户id
      remark:'通过',//备注
      verifyItem:'',

    }
  },
  methods: {
    getSTimeB:function(val){
      console.log(val)
      this.filters.beginDate=val;
    },
    getSTimeD:function(val){
      this.filters.endDate=val;
    },
    toggleStatus:function(index,row){
     //状态操作--审核
     this.withVerifyVisible=true;
    
      this.verifyItem=row;    
    },
    sureVerify(){
      this.$refs.withVerify.validate((valid) => {
        if (valid) {
          let para={
            idNo:this.verifyItem.idNo,
            status:this.withVerify.status,
            remark:this.withVerify.remark,
          }
          console.log(para)
          cnyrecharge.rechargeReview.r(para).then((res) => {
            console.log(res)

            if(res.data.retCode==1){
              this.withVerifyVisible=false;
              this.fetchData();
            }else{
              this.$message.error(res.data.retMsg);
            }
              this.loading = false;
            
          });
        }else{
          console.log('error submit!!');
          return false;

        }

      })

    },
     //状态转换
    formatSex: function (row, column) {
      return row.status == 30 ? '待审核' : row.status == 31 ? '拒绝' :row.status == 32 ? '完成' :row.status == 40 ? '未付款' :row.status == 41 ? '到账成功' : row.status == 42 ? '人工到账' : '处理中';
    },
    formatType: function (row, column) {
      return row.type == 1 ? '银联支付' : row.type == 2 ? '支付宝支付' :row.type == 3 ? '微信支付' :  '线下支付';
    },
    handleCurrentChange(val) {
      this.page = val;
      // this.getUsers();
      this.fetchData();
    },

    fetchData(init) {
      this.loading = true;
   /*   if(!this.$_has([cnyrecharge.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }*/
      let para = {
          // groupId:this.groupId,
          showCount:this.showCount,
          currentPage:this.page,//当前查询页
       
        };
        if(this.filters.userName){
          para.userName=this.filters.userName;
        }
        if(this.filters.tradeNo){
          para.tradeNo=this.filters.tradeNo;
        }
        if(this.filters.beginDate){
          para.beginDate=this.filters.beginDate;
        }
        if(this.filters.endDate){
          para.endDate=this.filters.endDate;
        }
        if(this.filters.status){
          para.status=this.filters.status;
        }
      console.log(para);
      cnyrecharge.request.r(para).then((res) => {
        console.log(res)

        if(res.data.retCode==1){
          this.total=parseInt(res.data.data.totalRow);
          this.list = res.data.data.list;
        }else{
          this.$message.error(res.data.retMsg);
        }
          this.loading = false;
        
      });
    },
    requestNotAllowed: function(){
      cnyrecharge.notAllowed.r();
    }
  },
  watch: {
          // 如果路由有变化，会再次执行该方法
          "$route": function(){
            this.routerPath=this.$route.path.split("/").pop();
            this.groupId="";
            this.fetchData(true)

          }
  },
  created() {
   /* this.isReleRole=this.$_has([users.releRolesUser]);
    this.isReleGroup=this.$_has([users.releGroupUser]);
    this.isEdit=this.$_has([users.modify]);
    this.isDel=this.$_has([users.remove]);
    if(this.$route.query.groupId!=undefined&&this.$route.query.groupId!="undefined"&&this.$route.query.groupId!=""){
      this.groupId=this.$route.query.groupId;
    }*/

    this.fetchData(true)
    /*console.log(this.$route.path.split("/").pop())*/
    this.routerPath=this.$route.path.split("/").pop();
    

  }
}
</script>